<template>
  <component
    :is="currentComponent"
    :file-list="fileList"
    :tips="tips"
    :drag="drag"
    :multiple="multiple"
    :accept="accept"
    :channel="channel"
    :max-allow-file-size="maxAllowFileSize"
    :limit="limit"
    :style="rootStyle"
    @change="onChange"
  >
    <template slot="tips">
      <slot name="tips" />
    </template>
  </component>
</template>

<script>
import defaultUpload from './default'
import filesUpload from './files'
import imageUpload from './image'
import galleryUpload from './gallery'
import mobileUpload from './mobile'
import mediaUpload from './media'
import tempUpload from './temp'
import videoUpload from './video'
import { uploadFile } from '@/api/attach'
export default {
  name: 'Uploader',
  components: {
    defaultUpload,
    filesUpload,
    imageUpload,
    galleryUpload,
    mobileUpload,
    mediaUpload,
    tempUpload,
    videoUpload
  },
  provide() {
    return {
      uploadAction: uploadFile,
      uploadOptions: this.uploadOptions
    }
  },
  props: {
    value: {
      type: [String, Array],
      default: ''
    },
    type: {
      type: String,
      default: 'image'
    },
    tips: {
      type: String,
      default: ''
    },
    drag: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 1
    },
    ratio: {
      type: Number,
      default: 1
    },
    width: {
      type: [Number, String],
      default: ''
    },
    columns: {
      type: Number,
      default: 0
    },
    columnWidth: {
      type: [Number, String],
      default: ''
    },
    channel: {
      type: String,
      default: ''
    },
    accept: {
      type: [Array, String],
      default: 'image/jpeg, image/gif, image/png, image/bmp'
    },
    maxAllowFileSize: {
      type: [Number, String],
      default: 1024 * 1024
    }
  },
  data() {
    return {}
  },
  computed: {
    fileList: {
      get() {
        console.log('parent needto update filelist', this.value)
        return this.value
      },
      set(val) {
        console.log('parent needto update filelist', val)
        this.$emit('input', val)
      }
    },
    currentComponent() {
      return `${this.type}Upload`
    },
    rootStyle() {
      var styles = []
      var ratio = (1 / Math.abs(this.ratio || 1)) * 100
      styles.push({
        '--ratio-percent': `${ratio}%`
      })
      if (ratio < 50) {
        styles.push({
          '--ratio-width': `200px`
        })
      }
      if (this.width) {
        styles.push({
          '--ratio-width': this.addUnit(this.width)
        })
      }

      var gridWidth = ''
      if (this.columnWidth) {
        gridWidth = this.addUnit(this.columnWidth)
      } else if (this.columns) {
        gridWidth = 100 / this.columns + '%'
      }
      if (gridWidth) {
        styles.push({
          '--grid-column-width': gridWidth
        })
      }
      return styles
    },
    uploadOptions() {
      return {
        limit: this.limit,
        accept: this.accept
      }
    }
  },
  methods: {
    addUnit(value) {
      if (value) {
        return /^\d+(\.\d+)?$/.test(value) ? value + 'px' : value
      }
      return undefined
    },
    onChange(data) {
      this.$emit('input', data)
    }
  }
}
</script>

<style lang="scss" >
:root {
  --ratio-percent: 100%;
  --ratio-width: 200px;
}
</style>
